
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Excel导入/导出</title>
</head>
<body>
<a href="javascript: exportXls();">导出</a>
<a onclick="importExcel()">导入</a>
</body>
<script src="lib/jquery.min.js"></script>
<script src="layer/layer.min.js"></script>
<script>
    // 下载模板
    function exportXls() {
        window.location.href = "/system/excel/exportXls";
    }
    function importExcel() {
        var currentId = 'importTpl';
        layer.open({
            type: 1,
            area: ['400px', '230px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '导入数据',
            content: $('#' + currentId).html(),
            btn: ['<i class="fa fa-check"></i> 导入', '<i class="fa fa-remove"></i> 取消'],
            // 弹层外区域关闭
            shadeClose: true,
            btn1: function(index, layero){
                var file = layero.find('#file').val();
                var index = layer.load(2, {shade: false});
                var formData = new FormData(layero.find('form')[0]);
                $.ajax({
                    url: "/system/excel/importExcel",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (result) {
                        console.log(result);
                    }
                });
            }
        });
    }
</script>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" id="file" name="file"/>
            <div class="mt10 pt5">
                <a onclick="exportXls()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
            </div>
            <font color="red" class="pull-left mt10">
                提示：仅允许导入“xls”或“xlsx”格式文件！
            </font>
        </div>
    </form>
</script>
</html>